{!! admin_css(['vendor/map/page.css']) !!}
<div class="my-class" style=" width: 100%;height: 100%;">
    <div id="container"></div>
    <div id="toolControl">
        <button class="btn btn-white" id="start_using">启用编辑</button>
        <button class="btn btn-sm btn-primary" id="save">保存</button>
    </div>
</div>
</div>
<script src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=TYBBZ-5F4HM-YOJ6Y-6LKZY-654Y3-BDFEG"></script>
<script type="text/javascript" init=".my-class">
    var map, editor;

    // function initMap() {
    // 初始化地图
    map = new TMap.Map("container", {
        rotation: 20,
        zoom: 15, // 设置地图缩放级别
        center: new TMap.LatLng(40.04019000341765, 116.27446815226199) // 设置地图中心点坐标
    });

    var simplePath = [
        new TMap.LatLng(40.04051164600918, 116.27488518619089),
        new TMap.LatLng(40.040943635857445, 116.27804611629756),
        new TMap.LatLng(40.03951759379146, 116.2783762087081),
        new TMap.LatLng(40.03891287066983, 116.2752049655744)
    ];
    // 初始化几何图形及编辑器
    editor = new TMap.tools.GeometryEditor({
        map, // 编辑器绑定的地图对象
        overlayList: [ // 可编辑图层
            {
                overlay: new TMap.MultiPolygon({
                    map,
                    styles: {
                        highlight: new TMap.PolygonStyle({
                            color: 'rgba(0,72,255,0.47)'
                        })
                    },
                    geometries: [
                        {
                            paths: simplePath
                        },
                    ]
                }),
                id: 'polygon',
                selectedStyleId: 'highlight'
            }
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        activeOverlayId: 'polygon', // 激活图层
        selectable: true, // 开启点选功能
        snappable: true // 开启吸附
    });

    // 监听删除、修改、拆分、合并完成事件
    let evtList = ['delete', 'adjust', 'split', 'union'];
    evtList.forEach(evtName => {
        editor.on(evtName + '_complete', evtResult => {
            console.log(evtName);
            console.log(evtResult);
            if (evtName === 'delete') {
                Dcat.error('当前删除无效,请刷新后重试');
            }
        });
    });

    // 监听拆分失败事件，获取拆分失败原因
    editor.on('split_fail', (res) => {
        alert(res.message);
    });
    // 监听合并失败事件，获取合并失败原因
    editor.on('union_fail', (res) => {
        alert(res.message);
    });

    // }

    // window.onload = initMap();
    // 获取按钮元素
    var save = document.getElementById('save');
    var edit = document.getElementById('start_using');
    // 添加点击事件监听器
    save.addEventListener('click', function () {
        editor.disable();
    });

    edit.addEventListener('click', function () {
        editor.enable();
    });
</script>
